<script setup lang="ts">
import { ref } from 'vue'
import {
  Delete, Edit, Search, ArrowLeft,
  ArrowRight,
} from '@element-plus/icons-vue'
const input = ref('')


// 定义一个列表来存储每个item的hover状态和标签值
const items = ref([
  { label: '如是OCR', hovered: false, time: "23:58" },
  { label: '智能标点', hovered: false, time: "21:58" },
  { label: '标点迁移', hovered: false, time: "13:58" },
  { label: '多文本比对', hovered: false, time: "9:58" },
  { label: '多文本比对', hovered: false, time: "9:58" },
  { label: '多文本比对', hovered: false, time: "9:58" },
  { label: '多文本比对', hovered: false, time: "9:58" },
  { label: '多文本比对', hovered: false, time: "9:58" },

])
</script>

<template>
  <div class="contentHis">
    <div class="top">
      <div class="title">历史记录</div>
      <div>
        <el-input class="input" v-model="input" clearable placeholder="搜索历史记录" :prefix-icon="Search" />
      </div>
    </div>
    <div class="bottom">
      <div class="item" v-for="item in items" :key="item.label" @mouseenter="item.hovered = true"
        @mouseleave="item.hovered = false">
        <div class="left">
          <img class="image" src="../assets/logo_icon.png" alt="">
          <div>{{ item.label }}</div>
        </div>
        <div class="right">
          <div v-show="!item.hovered">{{ item.time }}</div>
          <el-icon class="image" v-show="item.hovered" size="25" color="black" style="margin-right: 1vw;">
            <Edit />
          </el-icon>
          <el-icon class="image" v-show="item.hovered" size="25" color="#e55968">
            <Delete />
          </el-icon>
        </div>
      </div>
    </div>
    <!-- <div class="head">
      <el-button-group class="change">
        <el-button type="primary" round :icon="ArrowLeft" class="head-item">上一页</el-button>
        <el-button type="primary" round class="head-item">
          下一页<el-icon class="el-icon--right">
            <ArrowRight />
          </el-icon>
        </el-button>
      </el-button-group>
    </div> -->
  </div>
</template>
<style scoped>
.contentHis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
}

.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: clamp(40px, 2vw, 60px);
  font-weight: 600;
}

.input {
  width: 40vw;
  min-width: 400px;
  max-width: 600px;
  height: 4vh;
  margin-top: 2vh;
  font-size: clamp(16px, 1vw, 30px);
}

.bottom {
  margin-top: 10px;
}

.item {
  width: 40vw;
  min-width: 400px;
  max-width: 600px;
  height: 20px;
  border-radius: 0.5vw;
  margin-top: 15px;
  font-size: clamp(10px, 0.9vw, 30px);
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 设置平滑的过渡效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 默认阴影 */
  cursor: pointer;
}

.item:hover {
  transform: scale(1.02);
  /* 鼠标悬停时放大 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 鼠标悬停时阴影加重 */
}


.left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.image {
  margin-right: 1vw;
  width: 1.5vw;
  height: 1.5vw;
  min-width: 12px;
  min-height: 12px;
  max-width: 30px;
  max-height: 30px;
}

.right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.change {
  margin-top: 5vh;
  width: 40vw;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.head-item {
  height: 50px;
  width: 15vw;
  min-width: 150px;
  max-width: 200px;
}




@media (max-width:400px) {
  .contentHis {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: auto;
    max-width: none;
    margin-top: 10vh;
    width: 100%;
  }

  .title {
    font-size: 6vw;
  }

  .input {
    min-width: auto;
    max-width: none;
    width: 60vw;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 0.5vw;
    font-size: 4vw;
  }

  .item {
    min-width: auto;
    max-width: none;
    width: 60vw;
    font-size: 4vw;
  }

  .change {
    margin-top: 20px;
  }

  .head-item {
    height: 40px;
    width: 30vw;
    min-width: auto;
    max-width: none;
  }
}
</style>
